// 高亮样式类名
const HIGHLIGHT_CLASS = '__css_finder_highlight__';
const TOOLTIP_ID = '__css_finder_tooltip__';
let lastTarget = null;
let hLineTop = null,
    hLineBottom = null,
    vLineLeft = null,
    vLineRight = null;

// 创建高亮样式，虚线边框
function injectHighlightStyle() {
    if (document.getElementById('__css_finder_style__')) return;
    const style = document.createElement('style');
    style.id = '__css_finder_style__';
    style.innerHTML = `
    .${HIGHLIGHT_CLASS} {
      outline: 1px dashed #0066ff !important;
      cursor: pointer !important;
      z-index: 2147483647 !important;
    }
    #${TOOLTIP_ID} {
      position: fixed;
      background: #222;
      color: #fff;
      font-size: 12px;
      padding: 8px 12px;
      border-radius: 6px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.2);
      z-index: 2147483647;
      max-width: 400px;
      word-break: break-all;
      white-space: pre-wrap;
      pointer-events: none;
      display: none;
    }
    .__css_finder_line__ {
      position: fixed;
      z-index: 2147483647;
      pointer-events: none;
      border: none;
    }
    .__css_finder_line__.horizontal {
      border-top: 1px dashed #0066ff;
      height: 0;
    }
    .__css_finder_line__.vertical {
      border-left: 1px dashed #0066ff;
      width: 0;
    }
  `;
    document.head.appendChild(style);
}

function showCrossLinesAroundElement(element) {
    removeCrossLines();
    const rect = element.getBoundingClientRect();

    // 上横线
    hLineTop = document.createElement('div');
    hLineTop.className = '__css_finder_line__ horizontal';
    hLineTop.style.left = '0px';
    hLineTop.style.width = '100vw';
    hLineTop.style.top = rect.top + 'px';
    hLineTop.style.height = '1px';
    hLineTop.style.opacity = '0.7';
    document.body.appendChild(hLineTop);

    // 下横线
    hLineBottom = document.createElement('div');
    hLineBottom.className = '__css_finder_line__ horizontal';
    hLineBottom.style.left = '0px';
    hLineBottom.style.width = '100vw';
    hLineBottom.style.top = rect.bottom + 'px';
    hLineBottom.style.height = '1px';
    hLineBottom.style.opacity = '0.7';
    document.body.appendChild(hLineBottom);

    // 左竖线
    vLineLeft = document.createElement('div');
    vLineLeft.className = '__css_finder_line__ vertical';
    vLineLeft.style.top = '0px';
    vLineLeft.style.height = '100vh';
    vLineLeft.style.left = rect.left + 'px';
    vLineLeft.style.width = '1px';
    vLineLeft.style.opacity = '0.7';
    document.body.appendChild(vLineLeft);

    // 右竖线
    vLineRight = document.createElement('div');
    vLineRight.className = '__css_finder_line__ vertical';
    vLineRight.style.top = '0px';
    vLineRight.style.height = '100vh';
    vLineRight.style.left = rect.right + 'px';
    vLineRight.style.width = '1px';
    vLineRight.style.opacity = '0.7';
    document.body.appendChild(vLineRight);
}

function removeCrossLines() {
    [hLineTop, hLineBottom, vLineLeft, vLineRight].forEach(line => {
        if (line && line.parentNode) line.parentNode.removeChild(line);
    });
    hLineTop = hLineBottom = vLineLeft = vLineRight = null;
}

// 事件处理
function onMouseOver(e) {
    const target = e.target;
    if (target === document.body || target === document.documentElement) return;
    if (lastTarget && lastTarget !== target) {
        lastTarget.classList.remove(HIGHLIGHT_CLASS);
        removeCrossLines();
    }
    lastTarget = target;
    target.classList.add(HIGHLIGHT_CLASS);
    showCrossLinesAroundElement(target);
}

function onMouseMove(e) {
    window.lastMouseX = e.clientX;
    window.lastMouseY = e.clientY;
    if (lastTarget) {
        showCrossLinesAroundElement(lastTarget);
    }
}

function onMouseOut(e) {
    if (lastTarget) lastTarget.classList.remove(HIGHLIGHT_CLASS);
    removeCrossLines();
}



// 初始化
function init() {
    injectHighlightStyle();
    document.addEventListener('mouseover', onMouseOver, true);
    document.addEventListener('mousemove', onMouseMove, true);
    document.addEventListener('mouseout', onMouseOut, true);
}

init();